<template>
	<view class="pages">
		<image :src="info.coverUrl" class="goods-img"></image>
		<view class="title">{{info.title}}</view>
		<view class="price">
			<view><span>{{navId == 1?'购物券':'提货券'}}</span> {{navId == 1?info.money:info.voucher}}</view>
			
			
		</view>
		<!-- 规格 -->
		<view class="specifications-content">
			<!-- <view class="title">规格</view>
			<view >已选：玉见铃兰花手链（0.85g）</view> -->
		</view>
		<!-- <view class="changes">共2种规格可选</view> -->
		
		<view class="procss"></view>
		<view class="detail-title">商品详情</view>
		<view style="margin:20rpx 0 0 30rpx;width:690rpx;" v-html="html"></view>
		<view class="bottom">
			<view class="submit" @tap="clickBuy">立即兑换</view>
		</view>
		<!-- 规格弹窗 -->
		<view class="prop-content" v-if="isShowProp">
			<view class="prop">
				<image src="../../static/index/close.png" class="close-img" @tap="isShowProp = false"></image>
				
				<view class="goods-content">
					<image :src="info.coverUrl" class="goods-img"></image>
					<view class="goods-info">
						<view class="titles">{{info.title}}</view>
						<view class="prices">{{navId == 1?'购物券':'提货券'}} {{bugPrice}}</view>
						<view class="goods-num">
							<view>抢购数量：</view>
							<view class="num-content">
								<image src="../../static/index/reduce.png" class="num-imgs" @tap="reduce"></image>
							    <view class="num">{{num}}</view>
								<image src="../../static/index/add.png" class="num-imgs" @tap="add"></image>
							</view>
						</view>
					</view>
				</view>
				
				<view class="spec">规格</view>
				<view class="list">
				    <!-- <view class="item">玉见铃兰花手链（0.85g）</view> -->
				</view>
				<view class="submit" @tap="goUrl">立即抢购</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getVoucherGoods } from '../../api/api.js'
	export default {
		data() {
			return {
				isShowProp:false,
				goodsId:'',
				info:'',
				num:1,
				html:'',
				isVoucher:''  ,// 是否是多多券商品
				price:0,   // 单价
				bugPrice:0,   // 总价   
				isVip:0,         // 是否是会员礼包商品 1 是 0 不是
				navId:''
			}
		},
		onLoad(e) {
			this.goodsId = e.id
			this.isVoucher = e.isVoucher
			this.isVip = e.isVip
			this.navId = e.navId
			// 获取商品详情
			this.getDetail()
		},
		
		methods: {
			goUrl() {
				var orderInfo = {
					goodsImg:this.info.coverUrl,
					goodsId:this.info.id,
					goodsTitle:this.info.title,
					goodsPrice:this.price,
					goodsNum:this.num,
				}
				var orderInfo = JSON.stringify(orderInfo)
				uni.navigateTo({
					url:'./submitOrder?orderInfo=' + orderInfo + '&payType=' + (Number(this.info.payType) + 1) + '&isVip=' + this.isVip
				})
			},
			
			// 获取商品详情
			getDetail() {
				let data = {
					id:this.goodsId
				}
				getVoucherGoods(data).then( res=> {
					this.info = res.data
					var regex = new RegExp('<img ', 'gi')
					this.html = this.info.detail.replace(regex, '<img style="width: 100%;" ');
					this.price = this.navId == 1?Number(this.info.money):Number(this.info.voucher)
					this.bugPrice = this.price
				})
			},
			
			// 点击抢购
			clickBuy() {
				this.isShowProp = true
			},
			
			reduce() {
				if( this.num == 1 ) {
					return
				}
				this.num--
				this.bugPrice = (this.price * Number(this.num)).toFixed(2)
			},
			
			add() {
				this.num++
				this.bugPrice = (this.price * Number(this.num)).toFixed(2)
			}
		}
	}
</script>

<style lang="less">
    .pages {
		padding-bottom: 200rpx;
		.goods-img {
			width: 750rpx;
			height: 750rpx;
		}
		.title {
			margin: 24rpx 0 12rpx 30rpx;
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
		}
		.price {
			width: 690rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 16rpx;
			font-size: 40rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #d80202;
			span {
				font-size: 24rpx
			}
		}
		// 规格
		.specifications-content {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1A1A1A;
			.title {
				margin: 0 40rpx 0 30rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #808080;
			}
		}
		.changes {
			margin: 12rpx 0 0 120rpx;
			text-align: center;
			width: 200rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: #F2F2F2;
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
		}
		.procss {
			margin-top: 30rpx;
			width: 750rpx;
			height: 10rpx;
			background: #F5F5F5;
		}
		.detail-title {
			margin: 40rpx 0 0 30rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 50rpx;
		}
		.bottom {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position: fixed;
			bottom: 0;
			width: 690rpx;
			padding:0 30rpx;
			height: 150rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 2rpx 0rpx rgba(0,0,0,0.08);
			.yy {
				text-align: center;
				line-height: 90rpx;
				width: 320rpx;
				height: 90rpx;
				color: #FE3B33;
				border: 1rpx solid #FE3B33;
				box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.16);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
			}
			.submit {
				text-align: center;
				line-height: 90rpx;
				width: 690rpx;
				height: 90rpx;
				background: #FE3B33;
				box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.16);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
			.none {
				background: #a1a1a1;
				border: none;
				color: #fff;
			}
		}
		// 规格弹窗
		.prop-content {
			background-color: rgba(26, 26, 26, 0.4500);
			position: fixed;
			width: 100%;
			height: 100%;
			bottom: 0;
			.prop {
				padding-bottom: 40rpx;
				position: absolute;
				bottom: 0;
				width: 750rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				.close-img {
					position: absolute;
					top: 43rpx;
					right: 41rpx;
					width: 28rpx;
					height: 28rpx;
				}
				.goods-content {
					margin: 111rpx 0 0 38rpx;
					display: flex;
					align-items: center;
					.goods-img {
						margin-right: 20rpx;
						width: 180rpx;
						height: 180rpx;
					}
					.goods-info {
						.titles {
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1A1A1A;
							line-height: 45rpx;
						}
						.prices {
							margin-top: 10rpx;
							font-size: 36rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #CA0000;
							line-height: 50rpx;
						}
						.goods-num {
							width: 450rpx;
							margin-top: 21rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #808080;
							.num-content {
								display: flex;
								align-items: center;
								.num-imgs {
									width: 46rpx;
									height: 46rpx;
								}
								.num {
									margin: 0 36rpx;
									font-size: 32rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: #1A1A1A;
								}
							}
						}
					}
				}
				
				.spec {
					margin: 30rpx 0 0 38rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1A1A1A;
				}
				.list {
					margin:20rpx 0 100rpx 40rpx;
					width: 690rpx;
					display: flex;
					flex-wrap: wrap;
					.item {
						margin-right: 30rpx;
						margin-bottom: 20rpx;
						padding: 9rpx 20rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #808080;
						background: #F2F2F2;
						border-radius: 4rpx;
					}
					.active {
						border: 1px solid #FE3B33;
						color: rgba(23, 119, 255, 1);
					}
				}
				.submit {
					text-align: center;
					margin-left: 40rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					width: 670rpx;
					height: 90rpx;
					line-height: 90rpx;
					background: #FE3B33;
					box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.16);
					border-radius: 40rpx;
				}
			}
		}
	}
</style>
